<!-- 引入页面的样式 -->
<link rel="stylesheet" href="/assets/home/css/index.css">

<style>
    #slider{
        touch-action: none;
    }
</style>

<div class="mui-content">
    <div id="slider" class="mui-slider">
        <div class="mui-slider-group mui-slider-loop">
            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
            {foreach $TopList as $item}
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img src="{$item['thumb_cdn']}">
                        <p class="mui-slider-title">{$item['title']}</p>
                    </a>
                </div>
            {/foreach}
            
        </div>
        <div class="mui-slider-indicator mui-text-right">
            {foreach $TopList as $key => $item}
                <div class="mui-indicator"></div>
            {/foreach}
        </div>
    </div>
</div>
<div class="mui-input-row mui-search">
    <form onclick="location.href = './search.html' ">
        <input type="search" class="mui-input-clear" placeholder="搜索">
    </form>

</div>

{foreach $CateList as $item}
{if condition="COUNT($item['subject']) > 0"}
<div class="mui-content">
    <h5 class="title">{$item['name']}</h5>
    <ul class="mui-table-view mui-grid-view">
        {foreach $item['subject'] as $subject}
        <li class="mui-table-view-cell mui-media mui-col-xs-6">
            <a href="{:url('/home/subject/subject/info',['subjectid' => $subject['id']])}">
                <div class="imgs">
                    <img class="mui-media-object" src="{$subject['thumb_cdn']}">
                </div>
                <div class="mui-media-body">{$subject['title']}</div>
            </a>
        </li>
        {/foreach}
    </ul>
</div>
{/if}
{/foreach}
<div style="height: 70px;"></div>
<!-- 底部 -->
{include file='common/footer'/}

<script>
    var slider = mui("#slider");
    mui.init({
        swipeBack: true,//启用右滑关闭功能
    });
    slider.slider({
        interval: 1000
    });

</script>